<template>
  <a-form layout="inline" class="listSearchWrap vehicleVersionSearch table-page-search-wrapper">
    <a-row :gutter="[16,8]">
      <a-col
        :xs="24"
        :sm="24"
        :md="9"
        :lg="8"
        :xl="8"
        :xxl="6">
        <edit-item :label="$t('business')" textAlign="left" labelWidth="''">
          <a-input
            v-model.trim="queryParams.businessNameOrCode"
            :placeholder="$t('searchBusinessHolder')"
            :maxLength="50"
            @keyup.enter="handleSearch"
          />
        </edit-item>
      </a-col>
      <a-col
        :xs="24"
        :sm="24"
        :md="9"
        :lg="8"
        :xl="8"
        :xxl="5">
        <edit-item :label="$t('flow')" textAlign="left" labelWidth="''">
          <a-input
            v-model.trim="queryParams.definitionNameOrCode"
            :placeholder="$t('searchFlowHolder')"
            :maxLength="50"
            @keyup.enter="handleSearch"
          />
        </edit-item>
      </a-col>
      <a-col
        :xs="24"
        :sm="24"
        :md="6"
        :lg="8"
        :xl="8"
        :xxl="4"
        class="btnWarp">
        <a-form-item class="searchBtns">
          <a-button-group>
            <auth-button type="primary" :auth="flowPerms.bussinessType.view" @click="handleSearch">
              <i class="iconfont icon-chazhao"/>{{ $t('search') }}
            </auth-button>
            <a-button @click="clearCondition">
              <i class="iconfont icon-qingkong"/>{{ $t('clear') }}
            </a-button>
          </a-button-group>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>
<script>
import { mapState } from 'vuex'
import AuthButton from '@/components/AuthButton'
import { flowPerms } from '@/config/permission/index'
import CarModelSelect from '@/views/components/CarModelSelect'
import EditItem from '@/components/EditItem'
export default {
  components: {
    AuthButton,
    CarModelSelect,
    EditItem
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.flowRelatedConfig.queryParams
    })
  },
  data () {
    return {
      flowPerms
    }
  },
  watch: {
  },
  created () {
  },
  methods: {
    handleSearch () {
      this.$emit('clickbtn')
    },
    changeOption (key, val) {
      this.queryParams[key] = val
    },
    clearCondition () {
      this.$store.commit('resetFlowConfigQueryParams')
      this.handleSearch()
    }
  }
}
</script>
  <style lang="less">
  </style>
